{include file="header/index" /}
<div class="container whitebg agreement">
	<!-- 工单类型 -->
	<ul class="nav nav-tabs" role="tablist">
		<li><i class="glyphicon glyphicon-menu-hamburger" style="margin-top: 13px;"></i></li>
		<li role="presentation" class="active" id="remclass">
			<a href="#whole" aria-controls="whole" onclick="getk(0)" role="tab" data-toggle="tab">全部</a>
			<span class="fr">|</span>
		</li>
		<!--将工单类型循环取出-->
		{foreach $type as $k => $v}
		<li role="presentation">
			<a href="#install" aria-controls="install" id="type_{$k}" class="qieh{$k}" onclick="getk({$k})" role="tab" data-toggle="tab" data-status="{$k}">{$v}</a>
			<span class="fr">|</span>
		</li>
		{/foreach}

		<!--隐藏域，用来装工单类型id-->
		<input type="hidden" name="status" value="0" />

	</ul>

	<!--模糊搜索-->
	<form class="form-inline mt20 mb20" action="" method="post">
		<div class="form-group">
			<label>下单时间</label>
			<input class="form-control input-time" type="text" name="startTime" id="datetimeStart" readonly class="form_datetime">
			<input class="form-control input-time" type="text" name="endTime" id="datetimeEnd" readonly class="form_datetime">
		</div>
		<div class="form-group">
			<label>业务类型</label>
			<select id="type" class="form-control input-min">
				<option value="" selected="selected">请选择</option>
					{foreach $workType as $k=>$v}
				<option value="{$k}">{$v}</option>
					{/foreach}
			</select>
		</div>
		<div class="form-group mr20">
			<label>所属区域</label>
			<select class="form-control input-min" id="_province" onchange="showcity()">
				<option value="">--请选择省份--</option>
			</select>
			<select class="form-control input-min" id="_city" onchange="showareas()">
				<option value="">--请选择城市--</option>
			</select>
			<select class="form-control input-min" id="_area">
				<option value="">--请选择区/县--</option>
			</select>
		</div>
	</form>
	<form class="form-inline mt20 mb20" action="" method="post">
		<div class="form-group">
			<input type="text" class="form-control input-min" id="order_number" placeholder="请输入工单号">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="contract_no" placeholder="请输入合同编号">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="username" placeholder="请输入用户名">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="telphone" placeholder="请输入联系电话">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="engineers_name" placeholder="请输入工程人员">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="engineers_number" placeholder="请输入工程编号">
		</div>
		<div class="form-group mr20">
			<label>处理状态</label>
			<select id="workStatus" class="form-control input-min">
				{if condition='($workorderstatus == 3)'}
				<option value="" selected="selected">请选择处理状态</option>
				<option value="1">无效</option>
				<option value="2">前台未处理</option>
				<option value="3">前台已确认</option>
				{else /}
				<option value="" selected="selected">请选择处理状态</option>
				<option value="5">工程部未指派工程人员</option>
				<option value="7">工程人员未接单</option>
				<option value="8">工程人员服务中</option>
				<option value="9">工程人员已完成</option>
				<option value="10">前台未回访</option>
				<option value="11">前台已回访，未完成</option>
				<option value="12">前台已回访，已完成</option>
				<option value="13">已完成</option>
				{/if}
			</select>
		</div>
		<input type="hidden" id="UpdateTime" value="">
		<button type="button" id="search" onclick="searchs()" class="btn btn-default input-Btn">搜索</button>
	</form>

	<!-- Tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="whole">

			<table class="table table-bordered">
				<tr>
					<th><input type="checkbox" onclick="checkAll(this,'box')" id="all" /></th>
					<th>工单号</th>
					<th>户名</th>
					<th>联系电话</th>
					<th>业务类型</th>
					<th>所属运营中心</th>
					<th>所属区域</th>
					<th>金额</th>
					<th>换芯时间</th>
					<th>续费周期</th>
					<th>处理状态</th>
					<th>工程人员</th>
					<th>操作</th>
				</tr>
				<!--字符串拼接-->
				<tbody id="list">
					{volist name="data" id="k"}
				<tr>
					<td><input class="selectthis" type="checkbox" value="{$k.work_order_id}" name="box" onclick="selectAll('box','all')" /></td>
					<td>{$k.order_number}</td>
					<td>{$k.username}</td>
					<td>{$k.telphone}</td>
					<td>{$k.business_id}</td>
					<td>{$k.company_name}</td>
					<td>{$k.a_name}</td>
					<td>￥{$k.combo_money}元</td>
					<td>{$k.for_core_time}</td>
					<td>{$k.renew_date}</td>
					<td onclick="usrePopup({$k.work_order_id})">
						<span class="selecttxt cursor col-127" >{$k.work_order_status}</span>
					</td>
					<td>{$k.engineers_name}</td>
					<td>
						<a href="#">查看</a>
						<a href="#">修改</a>
					</td>
				</tr>
					{/volist}
				</tbody>

						<input type="hidden" value="" name="workOrderStatus" />
			</table>
			<div class="batchdelbtn" onclick="delmseeage('是否删除所有选中的信息')">批量删除</div>
			<div class="recyclebtn"><a href="{:url('admin/workorder/recycle')}">回收站</a></div>
			<div class="clearfix"></div>
		</div>

	</div>
						<!--用来装是未指派还是已指派对应值，用于修改状态时判断-->
						<input type="hidden" value="{$workorderstatus}" name="workorderstatus" />


	<!--分页显示-->
	<div class="clearfix" style="float:right;margin: 0 auto;">
		<span class="fl mt5">共<b id="total">{$count}</b>条数据&nbsp;</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
	</div>
	<!-- 加载动画 -->
	<div class="spiner-example">
		<div class="sk-spinner sk-spinner-three-bounce">
			<div class="sk-bounce1"></div>
			<div class="sk-bounce2"></div>
			<div class="sk-bounce3"></div>
		</div>
	</div>

	<input type="hidden" id="is_assigned" value="">

</div>
</body>
<script>

	/*
	 *操作台传值过来
	 */
	//--------------------------------------start---------------------------------------
    var assigned = $("#assigned", window.parent.document).val();
    var startUpdateTime = $("#startUpdateTime", window.parent.document).val();
    if (startUpdateTime != 'yes'){
		$("#UpdateTime").val(startUpdateTime);
	}
	if (assigned == 'yes'){
        $("#MenuShowList li:eq(1)", window.parent.document).click();
        var work_order_type = $("#work_order_type", window.parent.document).val();
        if (work_order_type != ''){
            $("#type_"+work_order_type).click();
            var work_order_status = $("#work_order_status", window.parent.document).val();
            $("#workStatus").val(work_order_status);
            searchs();
            startUpdateTime = '';
            $("#assigned", window.parent.document).val('');
		}
	}
	if (assigned == 'no'){
        $("#MenuShowList li:eq(0)", window.parent.document).click();
        var work_order_type = $("#work_order_type", window.parent.document).val();
        if (work_order_type != ''){
            $("#type_"+work_order_type).click();
            var work_order_status = $("#work_order_status", window.parent.document).val();
            $("#workStatus").val(work_order_status);
            searchs();
            startUpdateTime = '';
            $("#assigned", window.parent.document).val('');
        }
	}
    //--------------------------------------end---------------------------------------


	//处理工程人员传输显示订单
   var gcry = $("#gcry", window.parent.document).val();
   var status = $("#gstatus", window.parent.document).val();
   $("#engineers_number").val(gcry);
   if(status == 13){
       $("#workStatus option[value='13']").attr("selected","selected");
   }if(status == 8){
       $("#workStatus option[value='8']").attr("selected","selected");
   }


   //修改状态信息
    function usrePopup(id){   	
        var workorderstatus = $("input[name='workorderstatus']").val();
        // 发送ajax请求获取备注信息
        $.getJSON("{:url('/admin/workorder/getremarks')}",{work_order_id:id},function(data){
            // 获取工单类型配置信息，转换为对象
            var status_obj=<?php  echo json_encode($work_order_status); ?>;
            var status_arr = eval(status_obj);
            var str = "";
				str += "<option value=1>无效</option>";
				str += "<option value=2>前台未处理</option>";
				str += "<option value=3>前台已确认</option>";
				str += "<option value=5>工程部未指派工程人员</option>";
				str += "<option value=7>工程人员未接单</option>";
				str += "<option value=8>工程人员服务中</option>";
				str += "<option value=9>工程人员已完成</option>";
				str += "<option value=10>前台未回访</option>";
				str += "<option value=11>前台已回访，未完成</option>";
				str += "<option value=12>前台已回访，已完成</option>";

            var html ='<div class="stateWorkorder">';
            html +='<div>';
            html +='<p class="clearfix">';
            html +='<label class="fl">处理状态</label>';
            html +='<select id="_orderStatus'+id+'">';
            html +='<option value="">选择状态</option>';
            html +=str;
            html +='</select>';
            html +='</p>';
            html +='<p class="clearfix">';
            html +='<label  class="fl">备注</label>';
            html +='<textarea id="remarks'+id+'"></textarea>';
            html +='</p>';
            html +='<p class="state-Btn">';
            html +='<button onclick="savesuccess('+id+','+workorderstatus+')" type="button" class="btn btn-primary">保存</button>';
            html +='<button onclick="layuihide()" type="button" class="btn btn-default">取消</button>	';
            html +='</p>';
            html +='<ul class="">';
            $.each(data,function(k,v){
                html +='<li class="clearfix">';
                html +='<span class="state-lis-left fl ellipsis">' + v.remarks + '</span>';
                html +='<span class="state-lis-left fr ">备注人：'+ v.username +'  时间：' + v.operating_time + '</span>';
                html +='</li>';
            });
            html +='</ul>';
            html +='</div>';
            html +='</div>';
            html +='<input name="workOrderStatus'+id+'" value="'+id+'" type="hidden">';
            top.layer.open({
                type: 1,
                title: '处理状态',
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                area: ['600px', '420px'], //宽高
                shadeClose: true, //开启遮罩关闭
                content:html,
            });
        });
    }
    
   
	
    // 计算json对象长度
    function getJsonLength(jsonData){
        var jsonLength = 0;
        for(var item in jsonData){
            jsonLength++;
        }
        return jsonLength;
    }
	
	// 三级联动
	$(function() {
		// ajax 请求 获取省数据
		$.post("{:url('Three/province')}", {}, function(data) {
			$("#_province").html('');
			var str = '<option value="">--请选择省份--</option>';
			$.each(data, function(key, val) {
				str += '<option value="' + val.id + '" >' + val.area_name + '</option>';
			})
			$("#_province").html(str);
		}, 'json');

	});

	// 获取市数据
	function showcity() {
		// 获取选中省 对应的id
		var id = $("#_province option:selected").val();
        var str = '<option value="">--请选择城市--</option>';
        var str1 = '<option value="">--请选择区/县--</option>';
        $("#_city").html(str);
        $("#_area").html(str1);
		//发送ajax请求  获取省对应的市
		$.getJSON("{:url('Three/city')}", {
			parent_id: id
		}, function(data) {
			$("#_city").html('');
			var str = '<option value="">--请选择城市--</option>';
			$.each(data, function(k, v) {
				str += '<option value="' + v.id + '">' + v.area_name + '</option>';
			})
			$("#_city").html(str);
		});
	}
	// 获取 区/县数据
	function showareas() {
		// 获取选中市 对应的id
		var id = $("#_city option:selected").val();
		// 发送ajax请求 获取市对应的区县
		$.getJSON("{:url('Three/areas')}", {
			city_id: id
		}, function(data) {
			$("#_area").html('');
			var str = '<option value="">--请选择区/县--</option>';
			$.each(data, function(k, v) {
				str += '<option value="' + v.id + '">' + v.area_name + '</option>';
			});
			$("#_area").html(str);
		})
	}

	//   修改工单处理状态   1
	function showselectlist(obj) {

		if($(obj).next().hasClass('hide')) {
			$(obj).next().removeClass('hide').addClass('show');
		} else {
			$(obj).next().removeClass('show').addClass('hide');
		}
	}
	//   修改工单处理状态   2
	function selectstate(obj) {
		// 获取工单id
		var workId = $(obj).attr('work-id');
		// 获取状态对应的值
		var statusType = $(obj).attr('status-type');
		// 发送ajax请求;
		$.getJSON('status', {
			statusType: statusType,
			workId: workId
		}, function(data) {
			if(data.status == 0) {
				layer.msg('状态修改失败', {
					time: 1000
				});
			} else {
				layer.msg('状态修改成功', {
					time: 1000,
					icon: 1
				});
			}
		});
		var txt = $(obj).text();
		$(obj).parents('.selectstate').find('.selecttxt').text(txt);
		$(obj).parents('.selectlist').removeClass('show').addClass('hide');
	}

	//复选框选中
	function checkAll(obj, name) {
		//alert(obj.checked);
		//获取name=box的复选框
		var userids = document.getElementsByName(name);
		//alert(userids.length);
		for(var i = 0; i < userids.length; i++) {
			userids[i].checked = obj.checked;
		}
	}

	function selectAll(name, id) {
		//获取name=box的复选框
		var userids = document.getElementsByName(name);
		var count = 0;
		//遍历所有的复选框
		for(var i = 0; i < userids.length; i++) {
			if(userids[i].checked) {
				count++;
			}
		}
		//选中复选框的个数==获取复选框的个数 
		if(count == userids.length) {
			//设置id为all复选框选中
			document.getElementById(id).checked = true;
		} else {
			//设置id为all复选框不选中
			document.getElementById(id).checked = false;
		}
	}

	// 删除  (支持批量删)
	function del() {
		var str = [];
		$.each($('input:checkbox:checked'), function() {
			str.push($(this).val());
		});
		$.get("{:url('remove')}", {
			data: str,
			is_delete:1
		}, function(data) {
			Ajaxpage();
			if(data.status == 0) {
				layer.msg(data.message, {
					icon: 2
				});
			} else {
				layer.msg(data.message, {
					icon: 1
				});
			}
		})
	}
	// 批量删除 弹窗
	function delmseeage(txt, obj) {
		if($('.selectthis').is(':checked')) {
			layer.alert(txt, {
				btn: ['确认', '取消'] //按钮
			}, function() {
				// 调用del 方法，执行删除
				$('#all').prop('checked',false);
				del();
			});
		} else {
			layer.msg('您还未选中', {
				time: 1000,
				icon: 0
			});
		}
	}

	// 模糊搜索按钮点击事件
	function searchs() {

		// 获取工单类型隐藏域对应的值
		var workType = $("input[name='status']").val();
		// 清楚  全部按钮 的class样式
		$("#remclass>li").removeClass('active');
		// 给搜索的工单类型加入class
		$("#qie" + workType).parent('li').addClass('active');

		// 获取模糊搜索数据
		//            var startTime = $("#datetimeStart").val();
		//            var endTime = $("#datetimeEnd").val();
		//            var order_number = $("#order_number").val();
		//            var username = $("#username").val();
		//            var contract_no = $("#contract_no").val();
		//            var workStatus = $("#workStatus").val();
		//            var province = $("#_province").val();
		//            var city = $("#_city").val();
		//            var area = $("#_area").val();

		// 调用分页
		//            Ajaxpage(startTime,endTime,order_number,username,contract_no,workStatus,province,city,area);
		Ajaxpage();
        $("#gcry", window.parent.document).val('')
	};
    searchs();

	// 工单类型切换
	function getk(id) {
		//清空checkbox
		$("input[type=checkbox]").prop("checked", false);
		// 清空搜索数据
		$("#datetimeStart").val('');
		$("#datetimeEnd").val('');
		$("#order_number").val('');
		$("#username").val('');
		$("#telphone").val('');
        $("#engineers_name").val('');
        $("#engineers_number").val('');
		$("#workStatus").val('');
		$("#type").val('');
		$("#_province").val('');
		$("#_city").val('');
		$("#_area").val('');

		if (startUpdateTime == ''){
            $("#UpdateTime").val('');
        }

		// 将id存入隐藏域
		$("input[name='status']").val(id);

		// 调用分页
		Ajaxpage();
        $("#gcry", window.parent.document).val('')
	}



					//laypage分页
					Ajaxpage();
					// curr 获取当前页面数
					function Ajaxpage(curr) {
						// 获取模糊搜索数据
						var startTime = $("#datetimeStart").val();
						var endTime = $("#datetimeEnd").val();
						var order_number = $("#order_number").val();
						var username = $("#username").val();
						var telphone = $("#telphone").val();
						var engineers_name = $("#engineers_name").val();
						var engineers_number = $("#engineers_number").val();
						var workStatus = $("#workStatus").val();
						var type = $("#type").val();
						var province = $("#_province").val();
						var city = $("#_city").val();
						var area = $("#_area").val();
						var contract_no = $("#contract_no").val();

						//操作台跳转-----李港
						var startUpdateTime = $("#UpdateTime").val();
                        var endUpdateTime = $("#UpdateTime").val();

						var key = $('#key').val();
						// 获取隐藏域里面的类型对应数字
						var status = $('input[name="status"]').val();
						// 发送ajax请求
						$.getJSON('{:url("/admin/workorder/index")}', {
							page: curr || 1,
							key: key,
							status: status,
							startTime: startTime,
							endTime: endTime,
							order_number: order_number,
							username: username,
                            telphone: telphone,
                            engineers_name: engineers_name,
                            engineers_number: engineers_number,
							workStatus: workStatus,
							type: type,
							province: province,
							city: city,
							area: area,
                            startUpdateTime: startUpdateTime,
                            endUpdateTime: endUpdateTime,
                            contract_no: contract_no,
                            workorderstatus: {$workorderstatus}
						}, function(data) {
								console.log(data);
							$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
							if(data == '') {
								// 替换总的数据
								document.getElementById('total').innerText = 0;
								$("#list").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
							} else {
								// 替换总的数据
								document.getElementById('total').innerText = data[0].count;
								// 清空数据
								$("#list").html('');
								// 将数据循环，拼接
								var str = '';
								$.each(data, function(key, val) {
                                    var engineers_name= val.engineers_name==null ? '未指派' : val.engineers_name;
									str += '<tr>';
									str += '<td><input class="selectthis" type="checkbox" value=' + val.work_order_id + ' name="box" onclick="selectAll(' + "'box'" + ',' + "'all'" + ')"/></td>';
									str += '<td>' + val.order_number + '</td>';
									str += '<td>' + val.username + '</td>';
									str += '<td>' + val.telphone + '</td>';
									str += '<td>' + val.business_id + '</td>';
									str += '<td>' + val.company_name + '</td>';
									str += '<td>' + val.a_name + '</td>';
									str += '<td>'+"￥" + val.combo_money + "元" + '</td>';
									str += '<td>' + val.for_core_time + '</td>';
									str += '<td>' + val.renew_date + '</td>';
									str += '<td onclick="usrePopup(' + val.work_order_id + ')">';
									str += '<span class="selecttxt cursor col-127">' + val.work_order_status + '</span>';
									str += '<td>' + engineers_name + '</td>';
									str += '<td>';
									str += '<a href="/admin/workorder/detail/id/' + val.work_order_id + '">查看</a>&nbsp;';
                                    str += '<a href="/admin/workorder/edit/wid/'+val.work_order_id+'/uid/'+val.user_id+'/cid/'+val.contract_id+'/who/'+val.who+'">修改</a>';
									str += '</td>';
									str += '</tr>';
								});
								// 将拼接的数据输出在页面
								$("#list").html(str);

								laypage({
									cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
									pages: data[0].allPage, //总页数
									skip: true, //是否开启跳页
									skin: '#337ab7', //分页组件颜色
									curr: curr || 1,
									first: '首页', //若不显示，设置false即可
									last: '尾页', //若不显示，设置false即可
									groups: 3, //连续显示分页数
									jump: function(obj, first) {
										if(!first) {
											Ajaxpage(obj.curr)
										}
										$('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
										inputlength();
									}
								});
							}
						});
					}
</script>

</html>

<script type="text/javascript">
			//头部选项卡
			$('#myTabs a').click(function(e) {
				e.preventDefault()
				$(this).tab('show')
			})

			//日期选择
			$("#datetimeStart").datetimepicker({
				language: 'cn',
				format: "yyyy-mm-dd",
				autoclose: true,
				minView: "month",
				maxView: "decade",
				todayBtn: true,
				pickerPosition: "bottom-left"
			}).on("click", function(ev) {
				$("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
			});
			$("#datetimeEnd").datetimepicker({
				language: 'cn',
				format: "yyyy-mm-dd",
				autoclose: true,
				minView: "month",
				maxView: "decade",
				todayBtn: true,
				pickerPosition: "bottom-left"
			}).on("click", function(ev) {
				$("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
			});

</script>